import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import Index from '../Index/Index';
import Promotion from '../Promotion/Promotion';
import User from '../User/User';

import { connect } from 'react-redux';
import { switchHomeActionCreate } from '../../store/action/action';


class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: this.props.homeIndex || 1,
            hidden: false,
            fullScreen: true,
            tabBarList: [
                { id: 1, title: '首页', component: Index, icon: require('../../images/home_icon1.png'), selectIcon: require('../../images/home_icon6.png') },
                { id: 2, title: '分享赚钱', component: Promotion, icon: require('../../images/home_icon5.png'), selectIcon: require('../../images/home_icon2.png') },
                { id: 3, title: '个人中心', component: User, icon: require('../../images/home_icon3.png'), selectIcon: require('../../images/home_icon4.png') }
            ]
        };
    }

    switchTab = (index) => {
        this.setState({
            selectedTab: index
        });
    }

    render() {

        return (
            <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#f63e39"
                    barTintColor="white"
                    tabBarPosition='bottom'
                    hidden={this.state.hidden}
                >
                    {
                        this.state.tabBarList.map(item => {
                            return (
                                <TabBar.Item
                                    title={item.title}
                                    key={item.id}
                                    icon={<div style={{
                                        width: '22px',
                                        height: '22px',
                                        background: `url(${item.icon}) center center /  21px 21px no-repeat`
                                    }} />}
                                    selectedIcon={<div style={{
                                        width: '22px',
                                        height: '22px',
                                        background: `url(${item.selectIcon}) center center /  21px 21px no-repeat`
                                    }} />}
                                    selected={this.state.selectedTab === item.id}
                                    onPress={() => {
                                        this.props.changeHomeIndex(item.id);
                                        this.setState({
                                            selectedTab: item.id,
                                        });
                                    }}
                                    data-seed="logId"
                                >
                                    {<item.component switchTab={this.switchTab} />}
                                </TabBar.Item>
                            )
                        })
                    }

                </TabBar>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        homeIndex: state.homeIndex
    }
}

const mapDispatchToProps = dispatch => {
    return {
        changeHomeIndex: (index) => {
            dispatch(switchHomeActionCreate(index))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)